<template>
  <div class="formsheet">
    <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>结构分析图表</span>
            </div>
     <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
            <el-select size="small"  @change="areaselected(formInline.area_name)" v-model="formInline.area_name" placeholder="按区域筛选">
            <el-option 
            v-for="(item,index) in areacho"
            :key="item+index"
            :value="item.area"
            >{{item.area}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
            <el-select size="small"  @change="departmentselected(formInline.project_name)" v-model="formInline.project_name" placeholder="按项目筛选">
            <el-option 
            v-for="(item,index) in selection"
            :key="item+index"
            :value="item"
            >{{item}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="choose">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h5>总人数：{{count}}</h5>
    <div class="sheet">
      <div class="sheet1">
        <h4>性别分布</h4>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="sex" label="性别" header-align="center" align="center"></el-table-column>
          <el-table-column prop="count" label="人数" header-align="center" align="center"></el-table-column>
          <el-table-column prop="percent" label="百分比" header-align="center" align="center"></el-table-column>
        </el-table>
      </div>
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    </div>
    <div class="sheet">
      <div class="sheet1">
        <h4>年龄分布</h4>
        <el-table :data="ageDate" border style="width: 100%">
          <el-table-column prop="agearea" label="年龄区间" header-align="center" align="center"></el-table-column>
          <el-table-column prop="count" label="人数" header-align="center" align="center"></el-table-column>
          <el-table-column prop="percent" label="百分比" header-align="center" align="center"></el-table-column>
        </el-table>
      </div>
      <div id="agechart" :style="{width: '400px', height: '400px'}"></div>
    </div>
    <div class="sheet">
      <div class="sheet1">
        <h4>受教育结构分布</h4>
        <el-table :data="eduData" border style="width: 100%">
          <el-table-column prop="edu" label="学历" header-align="center" align="center"></el-table-column>
          <el-table-column prop="count" label="人数" header-align="center" align="center"></el-table-column>
          <el-table-column prop="percent" label="百分比" header-align="center" align="center"></el-table-column>
        </el-table>
      </div>
      <div id="educhart" :style="{width: '400px', height: '400px'}"></div>
    </div>
    <div class="sheet">
      <div class="sheet1">
        <h4>岗位结构分析</h4>
        <el-table :data="jobData" border style="width: 100%">
          <el-table-column prop="job" label="岗位分析" header-align="center" align="center"></el-table-column>
          <el-table-column prop="count" label="人数" header-align="center" align="center"></el-table-column>
          <el-table-column prop="percent" label="百分比" header-align="center" align="center"></el-table-column>
        </el-table>
      </div>
      <div id="jobchart" :style="{width: '400px', height: '400px'}"></div>
    </div>
  </div>
</template>

<script>
import {get,post} from '../../../utils/axios.tool'
export default {
  data() {
    return {
      count:1,
      tableData: [
        {
          sex: "男",
          count: '',
          percent: "",
        },
        {
          sex: "女",
          count: '',
          percent: "",
        }
      ],
      ageDate:[
        {
          agearea:"<=39",
          count:"",
          percent:""
        },{
          agearea:"40-49",
          count:"",
          percent:""
        },{
          agearea:"50-59",
          count:"",
          percent:""
        },{
          agearea:"60-64",
          count:"",
          percent:""
        },{
          agearea:">=65",
          count:"",
          percent:""
        },{
          agearea:"合计",
          count:"",
          percent:"100%"
        }
      ],
      eduData:[
        {
          edu:"大专以下",
          count:"",
          percent:""
        },{
          edu:"大专",
          count:"",
          percent:""
        },{
          edu:"本科",
          count:"",
          percent:""
        },{
          edu:"研究生",
          count:"",
          percent:""
        }
      ],
      jobData:[
        {
          job:"高层",
          count:"",
          percent:""
        },{
          job:"部门经理",
          count:"",
          percent:""
        },{
          job:"办公室管理人员",
          count:"",
          percent:""
        },
        {
          job:"一线管理人员",
          count:"",
          percent:""
        },{
          job:"一线员工",
          count:"",
          percent:""
        },{
          job:"合计",
          count:"",
          percent:"100%"
        }
      ],
      formInline: {
          area_name: '',
          project_name: '',
      },
      areacho:[],
    sel:['荣昌公司','重庆公司','四川公司'],
      sel2:['1组','2组','3组'],
    };
  },
  mounted(){
    this.drawLine();
    this.getData()
    this.areachoose()
  },
  computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area_name){
                    return this.areacho[i].project;
                }
            }
        },
   },
  methods: {
    getData(){
      let url = '/usermanage/analysis/'
      this.$axios.get(url,this.formInline).then(res=>{
        this.count = res.count
        this.ageDate[5].count = res.count
        this.jobData[5].count = res.count
        this.tableData[0].count = res.gender.man[0]
        this.tableData[0].percent = `${res.gender.man[1]}%`
        this.tableData[1].count = res.gender.woman[0]
        this.tableData[1].percent = `${res.gender.woman[1]}%`
        this.ageDate[0].count = res.age.age_lt40[0]
        this.ageDate[0].percent = `${res.age.age_lt40[1]}%`
        this.ageDate[1].count = res.age.age_gt40[0]
        this.ageDate[1].percent = `${res.age.age_gt40[1]}%`
        this.ageDate[2].count = res.age.age_gt50[0]
        this.ageDate[2].percent = `${res.age.age_gt50[1]}%`
        this.ageDate[3].count = res.age.age_gt60[0]
        this.ageDate[3].percent = `${res.age.age_gt60[1]}%`
        this.ageDate[4].count = res.age.age_gt65[0]
        this.ageDate[4].percent = `${res.age.age_gt65[1]}%`
        this.eduData[0].count = res.education.education_1[0]
        this.eduData[0].percent = `${res.education.education_1[1]}%`
        this.eduData[1].count = res.education.education_2[0]
        this.eduData[1].percent = `${res.education.education_2[1]}%`
        this.eduData[2].count = res.education.education_3[0]
        this.eduData[2].percent = `${res.education.education_3[1]}%`
        this.eduData[3].count = res.education.education_4[0]
        this.eduData[3].percent = `${res.education.education_4[1]}%`
        this.jobData[0].count = res.job_level.job_level1[0]
        this.jobData[0].percent = `${res.job_level.job_level1[1]}%`
        this.jobData[1].count = res.job_level.job_level2[0]
        this.jobData[1].percent = `${res.job_level.job_level2[1]}%`
        this.jobData[2].count = res.job_level.job_level3[0]
        this.jobData[2].percent = `${res.job_level.job_level3[1]}%`
        this.jobData[3].count = res.job_level.job_level4[0]
        this.jobData[3].percent = `${res.job_level.job_level4[1]}%`
        this.jobData[4].count = res.job_level.job_level5[0]
        this.jobData[4].percent = `${res.job_level.job_level5[1]}%`
        this.drawLine()
      })
    },
    areaselected(val){
      this.formInline.area_name = val
      this.formInline.project_name = ''
    },
    departmentselected(val){
      this.formInline.project_name = val
    },
    choose(){
      this.getData()
    },
    areachoose(){
      let url='/usermanage/area/'
      this.$axios.get(url).then(res=>{
        this.areacho = res.data
      })
    },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
            text: '性别分析',
            left: 'center'
        },
        color:['#F39494','#11C2EE'],
        tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
        legend: {
            bottom: 10,
            left: 'center',
            data: ['男', '女']
        },
        series: [
            {
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                  {value: this.tableData[1].count, name: '女'},
                  {value: this.tableData[0].count, name: '男'}
                ],
                
            }
        ]

        });
        let agechart = this.$echarts.init(document.getElementById('agechart'))
        // 绘制图表
        agechart.setOption({
          xAxis: {
              type: 'category',
              data: ['<=39', '40-49', '50-59', '60-64', '>=65']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [this.ageDate[0].count, this.ageDate[1].count, this.ageDate[2].count, this.ageDate[3].count, this.ageDate[4].count],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                  color: 'rgba(220, 220, 220, 0.8)'
              },
              itemStyle: {        //上方显示数值
                  normal: {
                      label: {
                          show: true, //开启显示
                          position: 'top', //在上方显示
                          textStyle: { //数值样式
                              color: 'red',
                              fontSize: 16
                          }
                      }
                  }
              }
          }]
        })
        let educhart = this.$echarts.init(document.getElementById('educhart'))
        // 绘制图表
        educhart.setOption({
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['大专以下', '大专', '本科', '研究生']
          },
          color:'#8470D4',
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [this.eduData[0].count, this.eduData[1].count, this.eduData[2].count, this.eduData[3].count],
              type: 'line',
              areaStyle: {},
              itemStyle: {        //上方显示数值
                  normal: {
                      label: {
                          show: true, //开启显示
                          position: 'top', //在上方显示
                          textStyle: { //数值样式
                              color: '#8470D4',
                              fontSize: 16
                          }
                      }
                  }
              }
          }]
        })
        let jobchart = this.$echarts.init(document.getElementById('jobchart'))
        // 绘制图表
        jobchart.setOption({
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['高层', '部门经理', '办公室管理人员', '一线管理人员','一线员工']
          },
          yAxis: {
              type: 'value'
          },
          color:'#13A930',
          series: [{
              data: [this.jobData[0].count, this.jobData[1].count, this.jobData[2].count, this.jobData[3].count,this.jobData[4].count],
              type: 'line',
              areaStyle: {},
              itemStyle: {        //上方显示数值
                  normal: {
                      label: {
                          show: true, //开启显示
                          position: 'top', //在上方显示
                          textStyle: { //数值样式
                              color: '#13A930',
                              fontSize: 16
                          }
                      }
                  }
              }
          }]
        })
    }
  }
};
</script>

<style lang="less">
.formsheet {
  .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
  h5{
        margin-left: 110px;
  }
  .el-input--mini .el-input__inner {
    width: 40%;
    margin-bottom: 22px;
  }
  .el-input--mini{
    display: inline;
    margin-right: 80px;
  }
  .el-input--suffix .el-input__inner{
      width: 130px;
  }
  .sheet{
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    .sheet1{
      width: 18%;
      padding: 10px;
      border: 1px solid skyblue;
      border-radius: 8px;
      margin: 35px 85px 0 29px;
      float: left;
      h4{
        text-align: center;
      }
    }
    #myChart{
      float: left;
    }
    #agechart{
      float: left;
      margin-top: 100px;
    }
    #educhart{
      float: left;
    }
    #jobchart{
      float: left;
    }
  }
  .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
    font-weight: bold;
  }
}
</style>